<template>
    <u-scroll-list @right="right" @left="left">
        <view class="scroll-list" style="flex-direction: row;">
            <view
                    class="scroll-list__goods-item"
                    v-for="(item, index) in list"
                    :key="index"
                    :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
            >
                <image class="scroll-list__goods-item__image" :src="item.thumb"></image>
                <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
            </view>
        </view>
    </u-scroll-list>
</template>
<script>
export default {
	data() {
		return {
			list: [{
				price: '230.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}, {
				price: '74.1',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
			}, {
				price: '8457',
                thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
			}, {
				price: '1442',
                thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
			}, {
				price: '541',
                thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
			}, {
				price: '234',
                thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
			}, {
				price: '562',
                thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
			}, {
				price: '251.5',
                thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
			}]
		}
	},
	methods: {
		left() {
			console.log('left');
		},
		right() {
			console.log('right');
		}
	}
}
</script>

<style lang="scss">
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}
}
</style>
